<template>
  <Row type="flex" justify="center" align="bottom">
    <!-- <i-col :span="1"></i-col> -->
    <i-col :span="4" style="height: 64px; line-height: 64px">
      <div class="img-logo-henan">
        <img
          src="../../assets/logo_guangshen.png"
          height="40px"
          style="vertical-align: middle"
        />
        <span class="layout-logo-title"> 广深珠高速公路有限公司 </span>
        <!-- <div>
        <img src="../../assets/henan_logo.png" height="40px" style="margin-left:5px">
        <span class="layout-logo-title" style="border:1px solid red">
          河南省高速公路联网监控收费通信
        </span>
        <span class="layout-logo-title" style="border:1px solid red">服务有限公司</span>
      </div>  -->
      </div>
    </i-col>
    <i-col :span="4" style="height: 64px; line-height: 64px">
      <!-- <div class="img-logo-swjtu">
        <img src="../../assets/swjtu_logo3.png" height="58px" />
      </div> -->
      <!-- <div>
        <img src="../../assets/swjtu_logo.png" height="30px">
        <span class="layout-logo-title">
          西南交通大学
        </span> </div>-->
    </i-col>

    <i-col :span="8" style="height: 64px; line-height: 64px">
      <div class="layout-title">广深高速公路智能监控分析系统</div>
    </i-col>
    <i-col :span="8">
      <Menu mode="horizontal" :active-name="$route.name">
        <div class="layout-nav">
          <MenuItem name="home" to="/">
            <Icon type="md-home" />
            主页
          </MenuItem>
          <MenuItem name="monitor" to="/monitor">
            <Icon type="md-videocam" />
            实时监控
          </MenuItem>
          <MenuItem name="events" to="/events">
            <Icon type="md-alert" />
            历史查询
          </MenuItem>
          <!-- <Submenu name="analysis-submenu" class="analysis-submenu">
            <template slot="title">
              <Icon type="md-stats" />
              数据统计
            </template>
            <MenuItem
              name="sub-company-analysis"
              to="/sub-company-analysis/xian/today"
              class="analysis-submenu-item"
              >分公司智能分析</MenuItem
            > -->
          <MenuItem
            name="station"
            to="/station-analysis/station/福永南入外1/today"
            class="analysis-submenu-item"
          >
            <Icon type="md-stats" />
            数据统计
          </MenuItem>
          <!-- </Submenu> -->
          <Button
            type="info"
            shape="circle"
            icon="md-log-out"
            style="margin-left: 42px"
            @click="logout"
          >
            退出
          </Button>
        </div>
      </Menu>
    </i-col>

    <VoiceBroadcast ref="voiceBroadcast" />
    <Modal
      v-model="isShowModal"
      title=""
      :width="modelWidth"
      @on-cancel="closeModal"
      @on-ok="closeModal"
      class-name="vertical-center-modal"
    >
      <p slot="header" style="height: 30px; line-height: 30px; font-size: 24px">
        <span
          >{{ eventPictureMsg.road_name }}&nbsp;-&nbsp;{{
            eventPictureMsg.event
          }}&nbsp;-&nbsp;{{ eventPictureMsg.starttime }}</span
        >
      </p>
      <div style="height: 100%">
        <!-- <img v-if="showImgVideo" :src="eventDetailData.http_url_image" width="100%" height="100%"/>
        <Mp4VideoPlayer v-else :src="eventDetailData.http_url_video"></Mp4VideoPlayer> -->
        <Row style="width: 100%; height: 100%" v-if="showPeople">
          <i-col span="18" style="height: 100%">
            <img
              style="border: 15px solid rgba(0, 90, 181, 0.5)"
              v-if="showImgVideo"
              :src="eventPictureMsg.p_path"
              width="100%"
              height="100%"
              @click="gotoMonitorPage"
            />
          </i-col>
          <i-col span="6">
            <img
              v-if="showPeople"
              style="border: 15px solid rgba(0, 90, 181, 0.5); top: 0px"
              :src="eventPictureMsg.b_p_path"
              width="100%"
              height="100%"
            />
          </i-col>
        </Row>
        <div v-else>
          <img
            style="border: 15px solid rgba(0, 90, 181, 0.5)"
            v-if="showImgVideo"
            :src="eventPictureMsg.p_path"
            width="100%"
            height="100%"
            @click="gotoMonitorPage"
          />
        </div>
        <!-- <Mp4VideoPlayer v-else
                        :src="eventPictureMsg.v_path"></Mp4VideoPlayer> -->
      </div>
      <!-- <div slot="footer">
        <Button type="success"
                size="large"
                @click="showEventPicture(true)">显示图片</Button>
        <Button v-if="
            eventPictureMsg.v_path !== '' && eventPictureMsg.v_path !== 'null'
          "
                type="warning"
                size="large"
                @click="showEventPicture(false)">播放视频</Button>
      </div> -->
    </Modal>
  </Row>
</template>

<script>
import dayjs from "dayjs";
import { reqEvent } from "@/api";
import Mp4VideoPlayer from "@/components/myvideo/Mp4VideoPlayer";
import { mapState, mapActions } from "vuex";
import VoiceBroadcast from "../../views/Home/voiceBroadcast";
var node_schedule = require("node-schedule");
export default {
  components: {
    Mp4VideoPlayer,
    VoiceBroadcast,
  },
  data() {
    return {
      isShowModal: false,
      newTime: null, //记录上一次获取报警事件的最新时间
      oldTime: null,
      allMonitorEventList: [],
      NewMonitorEventList: [],
      eventPictureMsg: {},
      showImgVideo: true,
      showPeople: false,
      getEventIndex: 0,
      road_index: 1,
      timeout: null,
      modelWidth: 1080,
    };
  },
  mounted() {
    console.log("执行header：mounted钩子");
    this.getEventIndex = 0;
    this.getEventTable();
    var intervalEventTabel = node_schedule.scheduleJob("*/10 * * * * *", () => {
      console.log(
        "实时监控页面事件列表实时获取 header-------------> 报警事件数据!"
      );
      this.getEventTable();

      // this.getNewEvent()
      // this.popNowMonitorList()
    });
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once("hook:beforeDestroy", () => {
      console.log(
        "取消 实时监控页面事件列表实时获取 header-------------> 报警事件数据"
      );
      intervalEventTabel.cancel();
      // this.NewMonitorEventList = [];
    });
  },
  computed: {},
  methods: {
    ...mapActions([
      "handleLogOut",
      "getAllVideoStreamUrl",
      "onloadVideoStreamPlayer",
      "reportAlarm",
    ]),
    logout() {
      this.handleLogOut().then(() => {
        this.$router.push({
          name: "login",
        });
      });
    },
    async getEventTable() {
      console.log("进入getEventTable");
      this.getEventIndex = this.getEventIndex + 1;
      let start_time = dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss");
      //let road_name = this.monitorData.videoMsg.ch_name
      let params = {
        start_time,
        page_index: 1,
        page_size: 50,
      };
      let resData = await reqEvent(params);
      if (resData.code === 6000) {
        this.newTime = resData.data.events[0].starttime; //取第一条（最新一条）的时间
        this.allMonitorEventList = resData.data.events;
        // this.setWarnPoint(this.allMonitorEventList);
        // console.log(
        //   "geteventTabel: ---this.allMonitorEventList----:",
        //   this.allMonitorEventList
        // );

        this.getNewEvent().then(() => {
          this.popNowMonitorList();
        });
      }
    },
    async getNewEvent() {
      // console.log("进入getNewEvent");
      if (this.getEventIndex == 1) {
        this.oldTime = this.newTime;
      }
      if (this.newTime != this.oldTime && this.getEventIndex != 1) {
        let start_time = this.newTime;
        let event = "行人入侵,车辆逆行";
        let params = {
          start_time,
          event,
          page_index: 1,
          page_size: 50,
        };
        console.log("new_params:", params);
        let resData = await reqEvent(params);
        if (resData.code === 6000) {
          if (resData.data.events.length != 0) {
            this.NewMonitorEventList.push(resData.data.events);
            // this.setWarnPoint(this.allMonitorEventList)
            console.log("NewMonitorEventList:", this.NewMonitorEventList);
          }
        }
        this.oldTime = this.newTime;
      }
    },
    async popNowMonitorList() {
      // setTimeout(() => {
      // this.isShowModal = false //把上次显示的销毁
      // console.log("length:",this.NewMonitorEventList.length)
      if (this.NewMonitorEventList.length > 0) {
        // console.log("执行popNowMonitorList");
        console.log(
          "NewMonitorEventList不为空----长度为：",
          this.NewMonitorEventList.length
        );
        console.log("NewMonitorEventList----", this.NewMonitorEventList);

        // this.showPopPicture()
        //console.log("this.NewMonitorEventList[0]:",this.NewMonitorEventList[0])
        await this.showPopPicture(this.NewMonitorEventList[0]);
        //开启语音播报
        await this.$refs.voiceBroadcast.playVoice(this.NewMonitorEventList[0]);
        this.timeout = setTimeout(() => {
          if (this.isShowModal == true) {
            this.isShowModal = false; //把上次显示的销毁
            this.NewMonitorEventList.shift();
            this.$refs.voiceBroadcast.stopVoice(); //终止语音播报
            clearTimeout(this.timeout);
            console.log(
              "删除NewMonitorEventList第一个元素后:" + this.NewMonitorEventList
            );
            while (this.NewMonitorEventList.length > 3) {
              //控制队列长度
              this.NewMonitorEventList.shift();
              console.log(
                "控制队列长度后----长度为：",
                this.NewMonitorEventList.length
              );
              console.log("控制队列长度后--------", this.NewMonitorEventList);
            }
          }
        }, 10000);
      }
      // }, 5000);
    },
    // 是否显示行人入侵截图
    showPeopleImg() {
      if (this.eventPictureMsg.event == "行人入侵") {
        this.modelWidth = 1440;
        this.showPeople = true;
      } else {
        this.modelWidth = 1080;
        this.showPeople = false;
      }
    },
    showPopPicture(itemlist) {
      console.log("弹出:", itemlist[0]);
      this.eventPictureMsg = itemlist[0];
      this.showPeopleImg();
      this.isShowModal = true;
      this.showImgVideo = true;
      let params = { road_name: itemlist[0].road_name };
      this.reportAlarm(params);
    },
    handleRoadName(roadName) {
      console.log("传入的roadName:", roadName);
      if (roadName == "福永南入外1") {
        this.road_index = 1;
      } else if (roadName == "福永南入外2") {
        this.road_index = 2;
      } else if (roadName == "福永南入内") {
        this.road_index = 3;
      } else {
        this.road_index = roadName.charAt(roadName.length - 1);
        console.log("除前3路road_index：", this.road_index);
      }
    },
    gotoMonitorPage() {
      this.getAllVideoStreamUrl(1) //this.switchWayNo为1，只有1路，不用该变量
        .then(() => {
          this.handleRoadName(this.eventPictureMsg.road_name);
        })
        .then(() => {
          this.isShowModal = false;
          this.NewMonitorEventList.shift();
          this.$refs.voiceBroadcast.stopVoice(); //终止语音播报
          clearTimeout(this.timeout);
          this.handleVideo(this.road_index);
          setTimeout(() => {
            console.log("已跳转到monitor");
            this.$router.push({
              path: "/monitor",
              name: "monitor",
              // params: {
              //   roadname: this.monitorData.videoMsg.ch_name
              // }
            });
            // this.handleVideo(this.road_index);
          }, 2000);
        });
    },
    closeModal() {
      this.isShowModal = false;
      this.NewMonitorEventList.shift();
      this.$refs.voiceBroadcast.stopVoice(); //终止语音播报
      clearTimeout(this.timeout);
    },
    handleVideo(index) {
      let roadName = this.$store.state.allVideoStreamUrl.videoDetail[index - 1]
        .ch_name;
      //console.log("in roadName:",roadName)
      // let wayNo = this.switchWayNo;
      let wayNo = 1;
      let params = { wayNo, roadName };
      this.onloadVideoStreamPlayer(params);
    },
  },
};
</script>

<style lang="less">
.ivu-menu-horizontal {
  height: 0rem !important;
  line-height: 3rem !important;
}
.ivu-menu-horizontal.ivu-menu-light:after {
  height: 0rem !important;
}
.ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active {
  color: #fff !important;
  background-color: #1081b3;
}
.ivu-layout-header {
  background-color: #01237c !important;
  //background-color: rgb(12,55,131) !important;
}
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  // position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-title {
  // width: 600px;
  height: 64px;
  line-height: 64px;
  font-size: 3.2rem;
  font-weight: bold;
  text-align: center;
  color: #4bdaff;
  border-radius: 0.3rem;
  // float: left;
  // position: relative;
  // top: 1.5rem;
  border-bottom: 0.3rem solid #4bdaff;
  // left: 0px;
}
.layout-logo-title {
  // width: 600px;
  height: 64px;
  line-height: 64px;
  font-size: 2.3rem;
  font-weight: bold;
  text-align: center;
  color: rgb(239, 242, 245);
  text-align: left;
  font-family: STKaiti;
  //position:relative
}
.ivu-menu-item,
.ivu-menu-submenu {
  color: #fff !important;
  font-weight: bold;
  font-size: 1.4rem !important;
}
.analysis-submenu .analysis-submenu-item.ivu-menu-item-active,
.analysis-submenu-item:hover {
  background: none !important;
  color: #4bdaff !important;
}
.layout-nav {
  // width: 82rem;
  height: 3rem;
  padding-left: 3rem;
  margin: 0 auto;
  // float: right;
}
.img-logo-henan {
  //margin-right:10px;
  opacity: 0.85;
  margin-top: 3px;
  margin-right: -10px;
}
.img-logo-swjtu {
  //vertical-align: bottom;
  //margin-right:10px;
  opacity: 0.85;
  margin-top: 13px;
  margin-left: 30px;
}
</style>
